<!--20210304    zaq    加入查询子组件-->
<!--20210309    zaq    新增按钮实现查询子组件的显示、隐藏-->
<!--20210511    zaq    修改导入路径，注释查询框，修改显示界面,修改数据格式-->
<!--20210522    zaq    修改界面，实现方法-->

<template>
  <div class="list" style="text-align: left">

    &#12288;<span>查询月:</span>&#12288;
    <el-date-picker
        v-model="selectDate"
        type="month"
        placeholder="选择月">
    </el-date-picker>
    <el-button @click="select">查询</el-button>

    <!--    新增收支记录-->
    <el-dialog
        title="新增收支记录"
        v-model="createVisible"
        width="50%"
        style="text-align: left"
        :before-close="handleClose">
      <insert-list ref="insertList"></insert-list>
    </el-dialog>

    <el-button style="width: 100%" @click="create"><i class="el-icon-plus"></i> 新增收支记录</el-button>

    <div style="overflow: auto;height: 30em">
      <el-collapse accordion v-for="list in lists">
        <el-collapse-item v-if="list.code>0">
          <template #title style="height: 5em;">
          <span style="width: 60%;">
            &#12288;&#12288;
              <span v-if="list.sFlag=='收入'" style="color:#dd6161;font-size: 12px">收入&#12288;</span>
              <span v-else style="color: #25b591;font-size: 12px">支出&#12288;</span>
              <span style="">{{ list.sNumber }}&#12288;</span>
              <span v-if="list.sFlag=='收入'" style="color:#dd6161;font-size: 12px">元</span>
              <span v-else style="color: #25b591;font-size: 12px">元</span>
          </span>

            <span >
            <span style="font-size: 10px;color: #72767b">{{list.sDate}}&#12288;{{list.sTime}}</span>
          </span>

            <!--            <el-col>-->
            <!--              <div style="text-align: right">-->
            <!--                <span style="font-size: 10px;color: #72767b">{{list.sDate}}&#12288{{list.sTime}}</span>-->
            <!--              </div>-->
            <!--            </el-col>-->

          </template>
          <div class="details" style="width: 100%;padding: 2em">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="类型:">
                <span>{{ list.sKind }}</span>
              </el-form-item>
              <el-form-item label="">
                <span>&#12288;&#12288;&#12288;</span>
              </el-form-item>
              <el-form-item label="支付方式:">
                <span>{{ list.sPay }}</span>
              </el-form-item><br>
              <el-form-item label="备注:">
                <span>{{ list.sText }}</span>
              </el-form-item>
            </el-form>

          </div>


          <div style="text-align: right;width: 90%;padding: 2px;margin: 2px">
            <div style="text-align: left">
              <el-dialog
                  title="修改收支记录"
                  v-model="updateVisible"
                  width="50%"
                  style="text-align: left"
                  :before-close="handleClose">
                <update-list v-bind:form="updateForm"></update-list>
              </el-dialog>
            </div>


            <el-button @click="update(list)">
              <i class="el-icon-edit"></i> 修改
            </el-button>&#12288;

            <el-button @click="deleteList(list)">
              <i class="el-icon-delete"></i> 删除
            </el-button>

          </div>
        </el-collapse-item>
      </el-collapse>
    </div>



  </div>
</template>

<script>
import select_list from "./Select_list";
import update_list from "./Update_list";
import insert_list from "./Insert_list"
import moment from "moment";
import {getList_0000, delete_14301, delete_13301} from "../../api";

export default {
  name: "List",
  created() {
    this.select()
  },
  computed:{
    noMore () {
      return this.count >= this.max_count
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  data(){
    return {
      updateForm:'',
      updateVisible:false,//修改记录
      selectDate:new Date(),//查询月份
      listColor:function (flag){
        if(flag==='1')
          return 'success'
        else
          return 'warning'
      },//根据收入支出选择不同颜色
      loading:false,//加载中
      count:3,
      createVisible:false,
      max_count:3,
      dialog_visible:true,
      currentPage: 4,
      lists: [{
        code:-1,
        note:"",
        sId:1,
        sNumber: '25.2',
        sFlag: '1',
        sDate: '20210302',
        sKind:'',
        sPay:'',
        sText:'',
        delete:'',
        uId:'',
        bId:'',
        gId:'',
        update:false,
      },
        {
          code:-1,
          note:"",
          sId:1,
          sNumber: '25.2',
          sFlag: '1',
          sDate: '20210302',
          sKind:'',
          sPay:'',
          sText:'',
          delete:'',
          uId:'',
          bId:'',
          gId:'',
          update:false,
        }
      ],
      kinds:[{
        kId:-1,
        kName:'',
        kFlag:'',
        kBId:-1,
        uId:-1,
        delete:0
      }],
      selectTime:'',
    }
  },
  methods:{
    //删除记录
    deleteList(list){
      const _this=this
      this.$confirm('此操作将永久删除明细, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete_14301(list).then(resp=>{
          if(resp.code>0){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            _this.select()
          }else {
            this.$message({
              type: 'error',
              message: '删除失败：'+resp.note
            });
          }
        }).catch(error=>{
          this.$message({
            type: 'error',
            message: '调用接口14301失败：'+error
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //修改明细
    update(list){
      var str=list.sDate.toString()
      var yyyy=str.substr(0,4)
      var mm=str.substr(4,2)
      var dd=str.substr(6,2)
      var date=''+yyyy+'-'+mm+'-'+dd
      var time=' '+list.sTime.toString()

      var flag=1
      if(list.sFlag=='收入'){
        flag=2
      }
      var body={
        sId:list.sId,
        count:list.sNumber,
        date:date+time,
        id:list.sId,
        kind:list.sKind,
        method:list.sPay,
        text:list.sText,
        flag:flag,
      }
      this.updateForm=body
      this.updateVisible=true
    },
    //修改日期显示
    getDate(date){
      var yyyy=date.substr(0,4)
      var mm=date.substr(4,2)
      var dd=date.substr(6,2)
      var create=''+yyyy+'-'+mm+'-'+dd
      return create
    },
    // 查找记录
    select(){
      //修改日期格式
      const _this=this;
      var uDate=moment(this.selectDate).format('yyyyMM');

      var body={
        startTime:parseInt(uDate)*100,
        endTime:parseInt(uDate)*100+31,
        code:-1,
        note:"",
        sId:1,
        sNumber: '25.2',
        sFlag: '1',
        sDate: '20210302',
        sKind:'',
        sPay:'',
        sText:'',
        delete:'',
        uId:sessionStorage.getItem("uId"),
        bId:sessionStorage.getItem("bId"),
        gId:sessionStorage.getItem("gId"),
        update:false,}

      getList_0000(body).then(resp=>{
        _this.lists=resp
      }).catch(error=>{
        this.$message({
          type: 'error',
          message: `接口调用失败:`+error
        });
      })
    },
    //新增记录
    create(){
      this.createVisible=true
    },
    load () {
      this.loading = true
      setTimeout(() => {
        this.count += 2
        this.loading = false
      }, 2000)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleClick(row) {
      console.log(row);
    },
    showDialog(visible){
      this.dialog_visible=visible
    }

  },
  components:{
    'select-list':select_list,//查询模块
    'update-list':update_list,//修改
    'insert-list':insert_list,//新增
  }
}
</script>

<style scoped>
.list{
  padding: 0;
  margin: 0;
  width: 100%;
}
</style>